<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>词云</title>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body {
            overflow: hidden;
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <h1 align="center">热搜词云</h1>
    <div id="mountNode"></div>
    <h1 align="center">热搜分布</h1>
    <div id="mountNode2"></div>
    <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
    <script>
        function getTextAttrs(cfg) {
            return _.assign({},

             cfg.style, {
                fillOpacity: cfg.opacity,
                fontSize: cfg.origin._origin.size,
                rotate: cfg.origin._origin.rotate,
                text: cfg.origin._origin.text,
                textAlign: 'center',
                fontFamily: cfg.origin._origin.font,
                fill: cfg.color,
                textBaseline: 'Alphabetic'
            });
        }

        // 给point注册一个词云的shape
        G2.Shape.registerShape('point', 'cloud', {
            drawShape: function drawShape(cfg, container) {
                var attrs = getTextAttrs(cfg);
                return container.addShape('text', {
                    attrs: _.assign(attrs, {
                        x: cfg.x,
                        y: cfg.y
                    })
                });
            }
        });



        var data = [{ 'name': '41岁的赵雅芝', 'value': 38022759 },

                { 'name': '释小龙经纪人回应女童武校身亡', 'value': 34139674 },
                { 'name': '央视采访奔驰维权车主', 'value': 18249272 },
                { 'name': '跑步机被沐浴露打败了', 'value': 17569905 },
                { 'name': '学院禁止女生穿露膝短裙', 'value': 14897558 },
                { 'name': '好像杨迪的弟弟', 'value': 13754428 },
                { 'name': '用百事和可口可乐下象棋', 'value': 12604078 },
                { 'name': '山东制药公司事故致10人死亡', 'value': 11065381 },
                { 'name': '旅行社黑名单', 'value': 10784661 },
                { 'name': '土创妹妹们的表情管理', 'value': 10678513 },
                { 'name': '语音里的声音不像自己', 'value': 8057661 },
                { 'name': '应聘被要求和面试官打麻将', 'value': 6891989 },
                { 'name': '滴滴顺风车暂无上线时间表', 'value': 6424364 },
                { 'name': '复联剧组是去拍旅游节目吗', 'value': 6241201 },
                { 'name': '出门旅行的第二天', 'value': 6001797 },
                { 'name': '弹幕说吴青峰抄袭苏打绿', 'value': 5909104 },
                { 'name': '李小璐删掉与贾乃亮结婚背景照', 'value': 5746968 },
                { 'name': '陈飞宇被北电录取', 'value': 5410223 },
                { 'name': '原来打游戏也能被气哭', 'value': 4803527 },
                { 'name': '宋茜机场小白瓶抢镜', 'value': 4784720 },
                { 'name': '王思聪不挑食头像', 'value': 4271155 },
                { 'name': '中国大陆首例试管婴儿当妈', 'value': 4117440 },
                { 'name': '你好新宝骏', 'value': 4074118 },
                { 'name': '王一博 眼妆', 'value': 3997083 },
                { 'name': '很遗憾但是不后悔的事', 'value': 3899051 },
                { 'name': '日本一秒小颜术', 'value': 3652720 },
                { 'name': '一京一诈', 'value': 3628608 },
                { 'name': '木村拓哉送签名礼物给罗志祥', 'value': 3619709 },
                { 'name': '减肥第一天得出的结论', 'value': 3551877 },
                { 'name': '唐嫣', 'value': 3224327 },
                { 'name': '朴灿烈SOLO单曲', 'value': 3109025 },
                { 'name': '单眼皮但颜值高的人', 'value': 3047813 },
                { 'name': '漫威电影中的即兴表演', 'value': 2859951 },
                { 'name': '马剑越想邀请陈铭主持婚礼', 'value': 2702693 },
                { 'name': '滴滴顺风车要回归了吗', 'value': 2696703 },
                { 'name': '如何鉴别996公司', 'value': 2685170 },
                { 'name': '李诞的灵魂伴侣', 'value': 2395352 },
                { 'name': '跟男朋友比手白', 'value': 2347361 },
                { 'name': '寸头男生颜值大赛', 'value': 2316114 },
                { 'name': '游乐园的惨痛回忆', 'value': 2186740 },
                { 'name': '李易峰时光剧场', 'value': 2153292 },
                { 'name': '你终将成为旗迹', 'value': 2100555 },
                { 'name': '歌颂者', 'value': 2033726 },
                { 'name': '皮特 瑞秋', 'value': 1927738 },
                { 'name': '油炸奥利奥', 'value': 1841838 },
                { 'name': '靠表情包找到失散姐妹', 'value': 1795411 },
                { 'name': '关东煮腰包', 'value': 1698438 },
                { 'name': '全国多家奔驰收金融服务费', 'value': 1667684 },
                { 'name': '学生时期的暗恋', 'value': 1620037 },
                { 'name': '人均800的日料', 'value': 1567783 },
                { 'name': '广东晋级总决赛', 'value': 1535917 },
                { 'name': '奥迪新车查出是事故车', 'value': 1489869 },
                { 'name': '路虎辞退涉事店员', 'value': 1479375 },
                { 'name': '孙珍妮北电成绩', 'value': 1454957 },
                { 'name': '税务部门调查奔驰事件4S店', 'value': 1379511 },
                { 'name': '被生活吊打的你', 'value': 711189 },
                { 'name': '电动自行车新国标', 'value': 590843 },
                { 'name': '朱莉皮特正式结束婚姻关系', 'value': 574204 },
                { 'name': '山崎贤人开微博', 'value': 535705 },
                { 'name': '超会抓娃娃的男朋友', 'value': 524079 },
                { 'name': '下班还非要熬夜玩游戏的人', 'value': 522023 },
                { 'name': '孕妇输液药品过期院长停职', 'value': 455992 },
                { 'name': '滴滴顺风车负责人道歉', 'value': 414443 },
                { 'name': '第一次被人误会的经历', 'value': 379327 },
                { 'name': '李小鹏入选国际体操名人堂', 'value': 353132 },
                { 'name': '释小龙', 'value': 351974 },
                { 'name': '贾跃亭最大资产再度流拍', 'value': 329628 },
                { 'name': '奔驰排放测试涉嫌作假', 'value': 328014 },
                { 'name': '食火鸡', 'value': 322946 },
                { 'name': '易建联半场24分', 'value': 320507 },
                { 'name': '海南高中足球联赛冲突', 'value': 299708 },
                { 'name': '海关破获特大象牙走私案', 'value': 297594 },
                { 'name': '在宇宙中生命诞生的几率', 'value': 294866 },
                { 'name': '易建联37分', 'value': 268109 },
                { 'name': '周鸿祎称强制996没有意义', 'value': 242893 },
                { 'name': '警方计划拘捕胜利', 'value': 225933 },
                { 'name': '当权力的游戏遇上神雕侠侣', 'value': 210558 },
                { 'name': '陕西省消协回应金融服务费', 'value': 204934 },
                { 'name': '河南调查女童武校身亡事件', 'value': 204224 },
                { 'name': '戛纳电影节主海报', 'value': 194129 },
                { 'name': '英雄联盟赛事', 'value': 182028 },
                { 'name': '委内瑞拉重回物物交换', 'value': 130918 },
                { 'name': '股市', 'value': 123517 },
                { 'name': '中国联通否认大裁员', 'value': 107027 },
                { 'name': '长佩崩了', 'value': 85232 },
                { 'name': '郭台铭助理否认郭台铭辞任', 'value': 72631 },
                { 'name': '微赛崩了', 'value': 67422 },
                { 'name': '利物浦 切尔西', 'value': 34227 },
                { 'name': 'LPL春季总决赛门票', 'value': 24796 }]
        var dv = new DataSet.View().source(data);
        var range = dv.range('value');
        var min = range[0];
        var max = range[1];
        dv.transform({
            type: 'tag-cloud',
            fields: ['name', 'value'],
            size: [window.innerWidth, window.innerHeight/2-80],
            font: 'Verdana',
            padding: 0,
            timeInterval: 5000, // max execute time
            rotate: function rotate() {
                var random = ~~(Math.random() * 4) % 4;
                if (random == 2) {
                  random = 0;
                }
                return 0; // 0, 90, 270
              },
            fontSize: function fontSize(d) {
                if (d.value) {
                    return (d.value - min) / (max - min) * (80 - 24) + 24;
                }
                return 0;
            }
        });
        var chart = new G2.Chart({
            container: 'mountNode',
            width: window.innerWidth,
            height: window.innerHeight/2-80,
            padding: 0
        });
        chart.source(dv, {
            x: {
                nice: false
            },

            y: {
                nice: false
            }
        });
        chart.legend(false);
        chart.axis(false);
        chart.tooltip({
            showTitle: false
        });
        chart.coord().reflect();
        chart.point().position('x*y').color('name').shape('cloud').tooltip('value*category');
        chart.render();


        var data2 = [{'name': '41岁的赵雅芝', 'scales': 3802.2759},
         {'name': '释小龙经纪人回应女童武校身亡', 'scales': 3413.9674},
         {'name': '央视采访奔驰维权车主', 'scales': 1824.9272},
         {'name': '跑步机被沐浴露打败了', 'scales': 1756.9905},
         {'name': '学院禁止女生穿露膝短裙', 'scales': 1489.7558},
         {'name': '好像杨迪的弟弟', 'scales': 1375.4428},
         {'name': '用百事和可口可乐下象棋', 'scales': 1260.4078},
         {'name': '山东制药公司事故致10人死亡', 'scales': 1106.5381},
         {'name': '旅行社黑名单', 'scales': 1078.4661},
         {'name': '土创妹妹们的表情管理', 'scales': 1067.8513},
         {'name': '语音里的声音不像自己', 'scales': 805.7661},
         {'name': '应聘被要求和面试官打麻将', 'scales': 689.1989},
         {'name': '滴滴顺风车暂无上线时间表', 'scales': 642.4364},
         {'name': '复联剧组是去拍旅游节目吗', 'scales': 624.1201},
         {'name': '出门旅行的第二天', 'scales': 600.1797},
         {'name': '弹幕说吴青峰抄袭苏打绿', 'scales': 590.9104},
         {'name': '李小璐删掉与贾乃亮结婚背景照', 'scales': 574.6968},
         {'name': '陈飞宇被北电录取', 'scales': 541.0223},
         {'name': '原来打游戏也能被气哭', 'scales': 480.3527},
         {'name': '宋茜机场小白瓶抢镜', 'scales': 478.4720},
         {'name': '王思聪不挑食头像', 'scales': 427.1155},
         {'name': '中国大陆首例试管婴儿当妈', 'scales': 411.7440}]



        var chart2 = new G2.Chart({
            container: 'mountNode2',
            forceFit: true,
            height: window.innerHeight/2-60
          });
          chart2.source(data2);
          chart2.scale('scales', {
            tickInterval: 500
          });
          chart2.interval().position('name*scales');
          chart2.render();
        $(window).resize(function () {
            chart.render();
            chart2.render();
        });



    </script>
</body>

</html>